<template>
    <div class="container">
        <el-row :gutter="20" class="mgb20">
            <el-col :span="8" class="class_demo">
                <div class="demo-basic--circle" style="height: 150px;">
                    <div class="block">
                        <el-avatar :size="120" :src="circleUrl" />
                    </div>
                    <div class="verticalBar"></div>
                    <div class="right_demo">
                        <h3>{{ msg }}</h3>
                    </div>
                </div>
                <hr>
                <div class="bottom_demo">
                    <p>管理员联系方式：{{ phone }}</p>
                    <p>登陆地点：{{ address }}</p>
                </div>
            </el-col>
            <el-col :span="15" class="class_right_demo">
                <el-descriptions class="margin-top" title="安全事故详记" :column="3" border v-for="item in Details"
                    :key="item.accidentNumber">
                    <template #extra>
                        <el-button type="primary" @click="recode">更多记录</el-button>
                    </template>
                    <el-descriptions-item label="事故编号">
                        <div class="cell-item">
                            {{ item.accidentNumber }}
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="联系方式">
                        <div class="cell-item">
                            {{ item.phone }}
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="事故地址">
                        <div class="cell-item">
                            {{ item.address }}
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="事故详情">
                        <div class="cell-item">
                            {{ item.accidentDetails }}
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
                <br>
                <el-button type="primary" @click="dialogTableVisible = true">添加记录</el-button>
            </el-col>
        </el-row>

        <el-dialog v-model="dialogTableVisible" title="添加记录" width="500">
            <el-form :model="safe">
                <el-form-item label="事故编号" :label-width="formLabelWidth">
                    <el-input v-model="safe.accidentNumber" autocomplete="off" />
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth">
                    <el-input v-model="safe.phone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="事故地址" :label-width="formLabelWidth">
                    <el-input v-model="safe.address" autocomplete="off" />
                </el-form-item>
                <el-form-item label="事故详情" :label-width="formLabelWidth">
                    <el-input v-model="safe.accidentDetails" autocomplete="off" />
                </el-form-item>
                <el-form-item label="负责人" :label-width="formLabelWidth">
                    <el-input v-model="safe.responsiblePerson" autocomplete="off" />
                </el-form-item>
                <!-- <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-date-picker v-model="safe.createTime" type="datetime" placeholder="请选择建立时间" />
        </el-form-item> -->
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogTableVisible = false">取消</el-button>
                    <el-button type="primary" @click="add">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-row :gutter="20" class="mgb21">
            <el-col :span="24" class="mgb21_demo">
                <el-tabs type="border-card" style="width: 99%;">
                    <el-tab-pane label="维修中">
                        <MaintenanceIn />
                    </el-tab-pane>
                    <el-tab-pane label="整备中">
                        <Preparation />
                    </el-tab-pane>
                    <el-tab-pane label="运行中">
                        <Operation />
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mgb22">
            <el-col :span="5" class="mgb22_1">
                <h3>车辆管理</h3>
                <el-icon :size="80">
                    <Van />
                </el-icon>
                <el-button type="primary" @click="addVehicle">新增车辆</el-button>
                <el-button type="warning" @click="updateVehicle">修改车辆</el-button>
            </el-col>
            <el-col :span="5" class="mgb22_1">
                <h3>员工管理</h3>
                <el-icon :size="80">
                    <User />
                </el-icon>
                <el-button type="primary" @click="addEmployee">新增员工</el-button>
                <el-button type="warning" @click="updateEmployee">修改员工</el-button>
            </el-col>
            <el-col :span="5" class="mgb22_1">
                <h3>行程管理</h3>
                <el-icon :size="80">
                    <LocationInformation />
                </el-icon>
                <el-button type="primary" @click="addTrip">新增行程</el-button>
                <el-button type="warning" @click="updateTrip">修改行程</el-button>
            </el-col>
            <el-col :span="5" class="mgb22_1">
                <h3>维修记录</h3>
                <el-icon :size="80">
                    <Tools />
                </el-icon>
                <el-button type="primary" @click="addMaintenance">新增记录</el-button>
                <el-button type="warning" @click="updateMaintenance">修改记录</el-button>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mgb23">
            <el-col :span="11" class="mgb23_1">
                <div class="mgb23_1_1">
                    <span>公告</span>
                    <el-button type="primary" @click="annount">
                        更多公告
                        <el-icon>
                            <MoreFilled />
                        </el-icon>
                    </el-button>
                    <el-button type="primary" @click="dialogFormVisible = true">
                        发布公告
                        <el-icon>
                            <Position />
                        </el-icon>
                    </el-button>
                </div>
                <div class="mgb23_1_2">
                    <h3>{{ title }}</h3>
                    <p>{{ notice }}</p>
                    <p style="margin-left: 70%;">编辑：
                        <span> {{ admin_name }}</span>
                    </p>
                    <p style="margin-left: 70%;">时间: <span> {{ modifierDate }}</span></p>
                </div>
            </el-col>
            <el-col :span="11" class="mgb23_2">
                <div class="demo-collapse">
                    <el-collapse v-model="activeName" accordion>
                        <h3>帮助文档</h3>
                        <el-collapse-item title="如何获取新的账号" name="1">
                            <div>
                                Consistent
                            </div>
                        </el-collapse-item>
                        <el-collapse-item title="如何修改密码" name="2">
                            <div>
                                Operation
                            </div>
                        </el-collapse-item>
                        <el-collapse-item title="如何使用系统" name="3">
                            <div>
                                Simplify
                            </div>
                        </el-collapse-item>
                        <el-collapse-item title="如何快速学习Vue" name="4">
                            <div>
                                Decision
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </el-col>
        </el-row>

        <el-dialog v-model="dialogFormVisible" title="发布公告" width="500">
            <el-form :model="form">
                <el-form-item label="公告标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="公告内容" :label-width="formLabelWidth">
                    <el-input v-model="form.notice" autocomplete="off" />
                </el-form-item>
                <el-form-item label="编辑" :label-width="formLabelWidth">
                    <el-input v-model="form.adminName" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addLi">
                        发布
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import MaintenanceIn from '../components/TabPane/MaintenanceIn.vue';
import Preparation from '../components/TabPane/Preparation.vue';
import Operation from '../components/TabPane/Operation.vue';
import { useRouter } from 'vue-router';
import { getSafety, addSafety, getAnnoucement, addAnnouncements, GetAvatar } from '../api/work.js'
import { ElMessage } from 'element-plus';

const router = useRouter();

const dialogFormVisible = ref(false)
const dialogTableVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    title: '',
    notice: '',
    adminName: '',
})

const safe = reactive({
    accidentNumber: '',
    phone: '',
    address: '',
    accidentDetails: '',
    createTime: '',
    responsiblePerson: ''
})

const Details = [{
    accidentNumber: '',
    phone: '',
    address: '',
    accidentDetails: '',
}]

const GetSafety = async () => {
    try {
        const result = await getSafety();
        // console.log(result.data.data)
        if (result.data.code === 200) {
            const data = result.data.data;
            Details[0].accidentNumber = data.accidentNumber;
            Details[0].phone = data.phone;
            Details[0].address = data.address;
            Details[0].accidentDetails = data.accidentDetails;
            // console.log(Details[0].phone)
        }
    } catch (error) {
        ElMessage.error('无法查询事故详情，请联系管理员')
    }
}

const notice = ref('')
const title = ref('')
const admin_name = ref('')
const modifierDate = ref('')
const circleUrl = ref('')
const msg = ref('')
const phone = ref('')
const address = ref('')

const Avatar = async(id: number)=>{
    const result = await GetAvatar(id);
    if(result.data.code === 200){
        const data = result.data.data;
        circleUrl.value = data.avatar;
        console.log(circleUrl.value)
        // circleUrl.value = 'https://tour-bus-back.oss-cn-chengdu.aliyuncs.com/img.jpg?Expires=1726381320&OSSAccessKeyId=TMP.3KjDqEZ3Kqyx4gV4133jC5DvndHM7gQHiae6a1QRRd6v9LbRP3J6EPvT3e5qn8YXKGHtSGdPYRgv1dJuLHvzqPmURUPukX&Signature=dQMeXkJBPi8ESvplQcUQ37rk5nQ%3D'
        msg.value = data.username;
        phone.value = data.phone;
        address.value = data.address;
    }
}

const reset = () => ref({
    accidentNumber: '',
    phone: '',
    address: '',
    accidentDetails: '',
    createTime: '',
    responsiblePerson: ''
})

const add = async () => {
    try {
        const result = await addSafety(safe);
        // console.log(safe)
        if (result.data.code === 200) {
            ElMessage.success(result.data.msg ? result.data.msg : '添加成功')
            dialogTableVisible.value = false;
            reset();
        }
    } catch (error) {
        ElMessage.error('请检查输入')
    }
}

const announcementList = async () => {
    const result = await getAnnoucement();
    console.log(result)
    if (result.data.code === 200) {
        const data = result.data.data;
        console.log(data.notice)
        title.value = data.title
        notice.value = data.notice
        admin_name.value = data.adminName
        modifierDate.value = data.modifierDate
    }
}

const addLi = async () => {
    const result = await addAnnouncements(form);
    if (result.data.code === 200) {
        ElMessage.success('发布成功')
        announcementList();
    } else {
        ElMessage.error('发布失败')
    }
    dialogFormVisible.value = false
}

onMounted(() => {
    Avatar(1);
    setTimeout(() => {
        GetSafety();
    }, 200)
    announcementList();
})

const activeName = ref('0')

const addVehicle = () => {
    router.push("/vehicle/add")
}

const updateVehicle = () => {
    router.push("/vehicle")
}

const addEmployee = () => {
    router.push("/employee/add")
}

const updateEmployee = () => {
    router.push("/employee")
}

const addTrip = () => {
    router.push("/journey")
}

const updateTrip = () => {
    router.push("/journey")
}

const addMaintenance = () => {
    router.push("/repair")
}

const updateMaintenance = () => {
    router.push("/repair")
}

const annount = () => {
    router.push('/setting')
}

const recode = () => {
    router.push('/records')
}
</script>

<style scoped>


.class_demo {
    height: 275px;
    border: 1px solid silver;
    border-radius: 10px;
    box-shadow: 2px 2px silver;
}

.block {
    margin: 30px 30px;
}

.verticalBar {
    border: 1px solid silver;
    height: 170px;
    width: 0;
    position: relative;
    top: -175px;
    left: 12pc;
    opacity: 0.6;
    float: left;
}

.right_demo {
    width: 50%;
    float: right;
    height: 150px;
    margin-top: -175px;
    font-size: 40px;
}

.right_demo h3 {
    margin: 23% 35px;
}

.class_right_demo {
    border: 1px solid silver;
    margin-left: 2pc;
    border-radius: 10px;
    box-shadow: 2px 2px silver;
}

.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 30px;
}

.mgb21 {
    margin-top: 20px;
    height: auto;
}

.mgb21_demo {
    /* border: 1px solid red; */
    border-radius: 20px;
}

.mgb22 {
    /* border: 1px solid red; */
    height: 260px;
    margin-top: 20px;
}

.mgb22_1 {
    border: 1px solid silver;
    border-radius: 20px;
    box-shadow: 2px 2px silver;
    height: 220px;
    margin-left: 40px;
    margin-top: 15px;
    cursor: pointer;
}

.mgb22_1:hover {
    transform: scale(1.1);
}

.mgb22_1 h3 {
    text-align: center;
}

.mgb22_1 .el-icon {
    margin-left: 90px;
}

.mgb22_1 .el-button {
    margin-top: 15px;
    margin-left: 25px;
}

.mgb23 {
    /* border: 1px solid silver; */
    margin-top: 20px;
    height: 300px;
    margin-bottom: 30px;
}

.mgb23_1 {
    border: 2px solid silver;
    margin-left: 10px;
    border-radius: 15px;
}

.mgb23_1_1 span {
    font-size: 30px;
    font-weight: bold;
}

.mgb23_1_1 .el-button {
    float: right;
    margin-top: 5px;
    margin-left: 20px;

}

.mgb23_1_2 {
    /* border: 1px solid blue; */
    height: 80%;
    margin-top: 10px;
}

.mgb23_2 {
    border: 2px solid silver;
    border-radius: 15px;
    margin-left: 60px;
}

/* .container{
    background-image: url(../assets/bg01.png);
} */
</style>